<template>
	<view class="order">
		<view class="content">
			<u-sticky bgColor="#f6f6fb" offsetTop="16">
				<view class="content-row">
					<view class="filter-row">时间</view>
					<view class="filter-radio" style="margin-left: 20rpx;">
						<radio-group @change="timeChange">
							<label v-for="item in typeList" :key="item.value" style="margin-right: 20rpx">
								<radio :value="item.value" :checked="item.value == time_radio" />
								{{ item.label }}
							</label>
						</radio-group>
					</view>
					<view class="content-input" v-if="time_radio">
						<picker v-if="time_radio == 1" mode="date" :value="queryParams.time" @change="confirmTime"
							fields="year">
							<input type="text" placeholder="请选择年份" v-model="queryParams.time" disabled
								placeholder-style="font-size: 28rpx;color: #969699;" />
						</picker>
						<picker v-if="time_radio == 2" mode="date" :value="queryParams.time" @change="confirmTime"
							fields="month">
							<input type="text" placeholder="请选择年/月" v-model="queryParams.time" disabled
								placeholder-style="font-size: 28rpx;color: #969699;" />
						</picker>
						<image src="../../static/del.png" mode="" v-if="queryParams.time" @click="delSearch(1)"
							class="del">
						</image>
					</view>
				</view>
				<view class="content-row">
					<view class="filter-row"></view>
					<view class="content-input" style="padding:20rpx 24rpx;">
						<input :value="hospital_name" type="text" placeholder="请选择医院" disabled
							@tap="getShowHospital(2)"
							placeholder-style="font-size: 28rpx; font-weight: 400; color: #C6C7CB;" />
						<image src="../../static/del.png" mode="" v-if="hospital_name" @click="delSearch(2)"
							class="del">
						</image>
					</view>
					<view class="content-input" style="margin-left: 20rpx;padding: 20rpx 24rpx;">
						<input :value="department_name" type="text" placeholder="请选择科室" disabled @tap="startRoom"
							placeholder-style="font-size: 28rpx; font-weight: 400; color: #C6C7CB;" />
						<image src="../../static/del.png" mode="" v-if="department_name" @click="delSearch(3)"
							class="del">
						</image>
					</view>
				</view>
				<view class="title_">
					医院维修维保支出
				</view>
				<view class="content-order">
					<view class="content-order-item">
						<view class="content-order-item-num">
							{{topInfo.weixiu||0}}
						</view>
						<view class="content-order-item-name">
							维修工单费用总计
						</view>
					</view>
					<view class="content-order-item">
						<view class="content-order-item-num">
							{{topInfo.weibao||0}}
						</view>
						<view class="content-order-item-name">
							维保工单费用总计
						</view>
					</view>
				</view>
				<view class="title_">
					科室维修维保支出
				</view>
			</u-sticky>

			<view class="table" style="width:100%">
				<table width="100%" height="16em" cellpadding="4.8" align="center">
					<tr>
						<th class="one">医院</th>
						<th class="k">科室</th>
						<th class="m">维修支出</th>
						<th class="m">维保支出</th>
					</tr>
					<tr v-for="(i,index) in tableList" @tap.stop="toCompany(i.id)">
						<td class="one">{{i.hospital_name}}</td>
						<td class="k">{{i.department_name}}</td>
						<td class="m">{{i.sum_final_price_weixiu||0.00}}</td>
						<td class="m">{{i.sum_final_price_weibao||0.00}}</td>
					</tr>
				</table>
			</view>
		</view>

		<u-picker :show="showHospital" :columns="hospitalList" keyName="label" @cancel="showHospital = false" :immediateChange="true"
			@confirm="getDoctor"></u-picker>
		<u-picker :show="showRoom" :columns="roomList" keyName="label" @cancel="showRoom = false"
			@confirm="getRoom"></u-picker>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				tableList: [],
				hospitalList: [],
				roomList: [],
				hospital_name: '',
				department_name: '',
				type: 1,
				showHospital: false,
				showRoom: false,
				time: '',
				queryParams: {
					department_id: '',
					time: '',
					hospital_id: '',
				},
				top_radio: null,
				time_radio: 1,
				typeList: [{
					value: 1,
					label: '年'
				}, {
					value: 2,
					label: '月'
				}],
				page: 1,
				last_page: 1,
				isShow: false,
				topInfo: {}
			}
		},
		onLoad(e) {


		},
		onShow() {
			this.page = 1
			this.last_page = 1
			this.doHandleYear()
		},
		methods: {
			doHandleYear(tYear) {
				var myDate = new Date();
				var tYear = myDate.getFullYear();
				this.time = tYear
				this.queryParams.time = tYear
				this.getListTop()
				this.getListSecond()
			},
			getShowHospital() {
				this.showHospital = true
				this.hospitalList = []
				this.getHospital()
			},
			topChange(e) {
				this.top_radio = e.detail.value;
				this.time = ""
			},
			timeChange(e) {
				this.time_radio = e.detail.value;
				this.queryParams.time = ""
			},
			// 切换日期
			extraTop(e) {
				this.time = e.detail.value;
				if (!this.time) return
				this.getListTop();
			},
			delSearch(e) {
				switch (e) {
					case 1:
						this.queryParams.time = ''
						break;
					case 2:
						this.hospital_name = ''
						this.queryParams.hospital_id = ''
						this.department_name = ''
						this.queryParams.department_id = ''
						break;
					case 3:
						this.department_name = ''
						this.queryParams.department_id = ''
						break;
					default:
						break;
				}
				this.tableList = []
				this.getListTop()
				this.getListSecond();
			},
			// 切换日期
			confirmTime(e) {
				this.queryParams.time = e.detail.value;
				if (!this.queryParams.time) return
				this.getListTop()
				this.getListSecond();
			},
			getHospital() {
				this.$https.post('/hospital/getHospitalList').then(res => {
					if (res.code == 1) {
						this.hospitalList.push(res.data.map(item => {
							return {
								label: item.name,
								id: item.id
							}
						}))
					}
				})
			},
			getDepartment() {
				this.$https.post('/hospital/getDepartmentList', {
					hospital_id: this.queryParams.hospital_id
				}).then(res => {
					if (res.code == 1) {
						this.roomList.push(res.data.map(item => {
							return {
								label: item.name,
								id: item.id
							}
						}))
					}
				})
			},
			getDoctor(e) {
				this.showHospital = false
				this.queryParams.hospital_id = e.value[0].id
				this.hospital_name = e.value[0].label
				this.roomList = []
				this.getDepartment()
				this.getListTop()
				this.getListSecond()
			},

			startRoom() {
				if (this.queryParams.hospital_id == "" || this.hospital_name == "") {
					uni.showToast({
						title: '请先选择医院!',
						icon: 'none'
					})
					return
				}
				this.showRoom = true
			},
			getRoom(e) {
				this.queryParams.department_id = e.value[0].id
				this.department_name = e.value[0].label
				this.showRoom = false
				this.tableList = []
				this.getListTop()
				this.getListSecond()
			},
			getListTop() {
				this.$https.post('/hospital/getWorkFinal', this.queryParams).then(res => {
					if (res.code == 1) {
						this.topInfo = res.data
					}
				})
			},
			//获取表格
			getListSecond() {
				this.$https.post('/hospital/getDepartmentWorkFinal', this.queryParams).then(res => {
					if (res.code == 1) {
						this.tableList = res.data
					}
				})
			},
		},

		// onReachBottom() {
		// 	if (this.page != this.last_page) {
		// 		this.page = this.page + 1
		// 		this.getListSecond()
		// 	}
		// },
	}
</script>

<style lang="scss" scoped>
	table {
		font-size: 26rpx;
	}

	table .one {
		width: 40% !important;
	}

	table .k {
		width: 19% !important;
	}

	table .m {
		width: 24% !important;
	}

	table tr {
		text-align: center;
		display: flex;
		color: #000;
		// align-items: center;	
	}

	.del {
		margin-right: 0;
	}

	//文本居中
	table th {
		padding: 14rpx 0;
		text-align: center;
		// align-items: center;
		width: 39%;
		border: 1rpx solid darkgrey;
	}

	table td {
		text-align: center;
		// align-items: center;
		width: 39%;
		padding: 14rpx 0;
		border: 1rpx solid darkgrey;
	}

	.order {
		height: 100vh;
		background-color: #f6f6fb;
	}

	.title_ {
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #303030;
		padding: 0 32rpx 14rpx 0;
		margin: 32rpx 0 10rpx;
	}

	.content {
		padding: 30rpx 32rpx 50rpx;
		background-color: #f6f6fb;


		&-order {
			height: 180rpx;
			background: #fff;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
			// border: 2rpx solid #1A66FF;

			&-item:nth-child(2) {
				border-left: 4rpx solid #f6f6fb;
				// border-right: 2rpx solid darkgrey;
			}

			&-item {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				color: #000;
				height: 100%;

				&-name {
					font-size: 26rpx;
					font-weight: 500;
					margin-top: 12rpx;
					// color: rgba(255, 255, 255, 0.6);
					line-height: 32rpx;
					letter-spacing: 8rpx;
				}

				&-num {
					font-size: 60rpx;
					font-weight: 540;
					color: #1A66FF;
				}
			}
		}

		&-row {
			display: flex;
			align-items: center;
			margin-bottom: 36rpx;
			height: 30px;
		}

		&-input {
			flex: 1;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			height: 30rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			display: flex;
			padding: 20rpx 24rpx 20rpx 40rpx;
			display: flex;
			align-items: center;

			image {
				width: 46rpx;
				height: 44rpx;
				margin-right: 0;
			}

			input {
				flex: 1;
			}
		}
	}
</style>